發想

如果頁面上的元素會依照物理定律，自然下落、彈跳等等，一定很有趣。(´,,•ω•,,)

類似以下影片。( ´ ▽ ` )ﾉ

規格

功能需求

1. 可以設定元素的物理性質。例：質量、彈性、阻力等等
2. 元素之間會互相碰撞
3. 元素只能在指定範圍內彈跳
4. 元素可以回到原始位置

建立檔案

與先前章節相同，讓我們建立元件與文件檔案，檔案結構如下。

.
├─ docs        
│  └─ components
│     └─ wrapper-physics
│        └─ index.md
└─ src
   └─ components
      └─ wrapper-physics
         ├─ examples
         ├─ └─ basic-usage.vue 
         ├─ wrapper-physics-body.vue
         └─ wrapper-physics.vue

此功能需要兩個元件互相配合：

• wrapper-physics：產生物理世界，定義邊界。
• wrapper-physics-body：定義物體，放在物理世界中。

元件內容

讓我們分別新增兩個元件，內容先留空。

src\components\wrapper-physics\wrapper-physics.vue

<template></template>

<script setup lang="ts">
import { ref } from 'vue';

// #region Props
interface Props { }
// #endregion Props
const props = withDefaults(defineProps<Props>(), {});

// #region Emits
const emit = defineEmits<{}>();
// #endregion Emits

// #region Slots
defineSlots<{
  default?: () => unknown;
}>();
// #endregion Slots

// #region Methods
defineExpose({});
// #endregion Methods
</script>

<style scoped lang="sass">
</style>

body 只保留 Props、Slots。

src\components\wrapper-physics\wrapper-physics-body.vue

<template></template>

<script setup lang="ts">
import { ref } from 'vue';

// #region Props
interface Props {}
// #endregion Props
const props = withDefaults(defineProps<Props>(), {});

// #region Slots
defineSlots<{
  default?: () => unknown;
}>();
// #endregion Slots
</script>

<style scoped lang="sass">
</style>

基本使用先加入基本內容。

src\components\wrapper-physics\examples\basic-usage.vue

<template>
  <div class="flex flex-col gap-4 w-full border border-gray-300 p-6">
    <wrapper-physics />
  </div>
</template>

<script setup lang="ts">
import WrapperPhysics from '../wrapper-physics.vue';
</script>

元件介紹

接著是元件介紹部分，一樣加入固定的基本內容。

docs\components\wrapper-physics\[index.md](http://index.md/)

---
description: 產生物理世界，讓內部元素具有物理效果 ヾ(⌐■_■)ノ♪
---

<script setup>
import BasicUsage from '../../../src/components/wrapper-physics/examples/basic-usage.vue'
</script>

# 物理包裝器

產生物理世界，讓內部元素具有物理效果 ヾ(⌐■_■)ノ♪

## 使用範例

### 基本用法

開始運行後，被 body 包裹的元素會產生物理效果

<basic-usage/>

::: details 查看範例原始碼
<<< ../../../src/components/wrapper-physics/examples/basic-usage.vue
:::

## 原理

文字文字文字文字文字文字文字

## API

### Props

<<< ../../../src/components/wrapper-physics/wrapper-physics.vue/#Props

### Emits

<<< ../../../src/components/wrapper-physics/wrapper-physics.vue/#Emits

### Methods

<<< ../../../src/components/wrapper-physics/wrapper-physics.vue/#Methods

### Slots

<<< ../../../src/components/wrapper-physics/wrapper-physics.vue/#Slots

導航

最後一步就是在 sidebar 中加入頁面連結。

docs\.vitepress\config.mts

...
export default defineConfig({
  ...
  themeConfig: {
    ...
    sidebar: [
      ...
      {
        text: '元件',
        link: '/components/',
        items: [
          ...
          {
            text: '包裝器',
            items: [
              { text: '物理包裝器', link: '/components/wrapper-physics/' },
            ]
          },
          {
            text: '實用',
            ...
          },
        ]
      },
    ],
    ...
  }
})

接下來讓我們開始開發元件吧！( •̀ ω •́ )✧

總結

• 分析「物理包裝器」的規格
• 建立元件與文件檔案

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D18